<template>
	<panel v-bind:data="formatted_recommends" v-bind:headerBtnType="'more'">
		<template slot="content" scope="contentScope">
			<div class="no-scroll">
				<div class="horizontal-list flex-cnt-start">
					<template v-if="contentScope.data.type === 4">
						<div class="suggest-item" v-for="(sugItem, index) in contentScope.data.recommends" v-bind:key="sugItem.id">
							<img class="pic" v-bind:src="sugItem.imgUrl">
							<p class="title">{{index + sugItem.title}}</p>
							<p class="name">{{sugItem.author}}</p>
						</div>
						<div class="suggest-item flex-cnt-cnt">
							<div>
								<div class="suggest-more flex-cnt-cnt">
									<span class="iconfont icon-arrowright"></span>
								</div>
								<p class="suggest-more-txt">查看全部</p>
							</div>
						</div>
					</template>
				</div>
			</div>
		</template>
	</panel>
</template>
<script>
	import Panel from 'CommonComponent/panel';

	export default {
		props: {
			'recommends': {
				type: Object,
				required: true
			}
		},
		computed: {
			formatted_recommends () {
				this.recommends.from = '知乎书店';
				return this.recommends;
			}
		},
		components: {
			'panel': Panel
		}
	}
</script>
<style lang="less" scoped>
	.no-scroll {
		width: 100%;
		height: 100%;
		overflow: hidden;
		max-height: 188px;
	}
	
	.horizontal-list {
		background-color: #fff;
		overflow-x: scroll;
		padding-bottom: 17px;
	}

	.suggest-item {
  	line-height: .16rem;
		position: relative;
		min-width: 100px;
		margin-right: 25px;

		.pic {
			width: 100%;
			margin-bottom: 5px;
		}

		.suggest-more {
			border: 2px solid #1E71B7;
			border-radius: 50%;
			width: 70px;
			height: 70px;
			margin: 0 auto 15px;

			.icon-arrowright {
				font-size: 30px;
				color: #1E71B7;
				font-weight: 700;
			}
		}

		.suggest-more-txt {
			font-size: 18px;
			color: #1E71B7;
		}

		.title {
			margin-bottom: 5px;
			color: #333;
			font-size: 12px;
			font-weight: 700;

			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.name {
			font-size: 12px;
			color: #999;
			white-space: nowrap;
		}
	}

	.btm-more {
		text-align: center;
		margin-top: 15px;
		color: #666;
		.fa-angle-right {
			margin-left: 5px;
		}
	}
</style>

